<template>
  <div class="managingPatientSize">
    <el-row>
      <el-col :span="3"></el-col>
      <el-col :span="20">
        <div id="china-map"></div>
      </el-col>
      <el-col :span="1"></el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'utils/echarts/map/js/china.js';
import geoJson from '@/utils/echarts/map/json/china.json'
echarts.registerMap('china', geoJson)
console.log("geoJson",geoJson)

export default {
  name: "index",
  data() {
    return {
      provinceInfo: [
        {
          name: "北京",
          oredrNum: 599,//订单数量
          goodsNum: 599,//货品数量
        },
        {
          name: "上海",
          oredrNum: 142,
          goodsNum: 599,
        },
        {
          name: "黑龙江",
          oredrNum: 44,
          goodsNum: 599,
        },
        {
          name: "深圳",
          oredrNum: 92,
          goodsNum: 599,
        },
        {
          name: "湖北",
          oredrNum: 810,
          goodsNum: 599,
        },
        {
          name: "四川",
          oredrNum: 453,
          goodsNum: 599,
        },
        {
          name: "新疆",
          oredrNum: 36,
          goodsNum: 31,
        },
        {
          name: "福建",
          oredrNum: 106,
          goodsNum: 30211111,
        },
      ],
    }
  },
  methods:{
    drawCharts () {
      // 基于准备好的dom，初始化echarts实例
      let chinaMap = echarts.init(document.getElementById("china-map"));
      window.onresize = chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resize
      chinaMap.setOption({
        // 进行相关配置
        tooltip: {
          // 鼠标移到图里面的浮动提示框
          backgroundColor: 'rgba(29,66,156,0.7)',//提示框背景色
          borderColor: 'rgba(0,0,0，0)',//边框夜色
          textStyle: {
            color: 'rgba(255, 255, 255, 1)'//文字颜色
          },
          //自定义提示框自动调用函数
          formatter: function (params) {
            let showname = params;
            let html = `<div style="width:100%;height:60px">
                    <p style="font-size:12px" >${showname.data.name ? showname.data.name : '暂无信息'}</p>
                    <p style="font-size:12px" >订单总数:${showname.data.oredrNum ? showname.data.oredrNum : '暂无信息'}</p>
                    <p style="font-size:12px">货品数量:${showname.data.goodsNum ? showname.data.goodsNum : '暂无信息'}</p>
                 </div>`
            return `门店数量\n${showname.data.oredrNum ? showname.data.oredrNum : '0'} 家`;
          }
        },
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ["High", "Low"],
          realtime: true,
          calculable: true,
          color: ["#fd7b78"],
        },
        geo: {
          // 这个是重点配置区
          map: "china", // 表示中国地图
          // roam: true, //是否允许放大
          label: {
            normal: {
              show: false, // 是否显示对应地名
              textStyle: {
                color: "#fd7b88", //对应地名颜色
              },
            },
          },
          //点击变色
          select: {
            itemStyle: {
              areaColor: "#fd7b88", //点击之后的省份颜色
            },
          },
          itemStyle: {
            normal: {
              //正常状态下的地图背景色
              borderColor: "#fff",
              borderWidth: "0.5",
              color: new echarts.graphic.LinearGradient( // 渐变色
                  0,
                  0,
                  1,
                  0, // 渐变色的起止位置, 右/下/左/上
                  [
                    // offset 位置
                    { offset: 0.8, color: '#f2aca0' },
                    { offset: 0, color: '#fd7b78' }
                  ]
              ),
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,//聚焦时候的阴影范围
              borderWidth: 0,
              shadowColor: "#f04b30",//聚焦时候的阴影颜色
              // 鼠标放上去地图区域背景颜色
              areaColor: '#fd7b78',//聚焦之后的颜色
              borderWidth: 0
            },
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo", // 对应上方配置
          },
          {
            // name: "启动次数", // 浮动框的标题
            type: "map",
            geoIndex: 0,
            data: this.provinceInfo
          },
        ],
      });
      // 地图打点-----
      let cityData = [
        {
          name: "北京",
          oredrNum: 599,//订单数量
          goodsNum: 599,//货品数量
        },
        {
          name: "天津",
          ename: "天津",
        },
        {
          name: "上海",
          oredrNum: 142,
          goodsNum: 599,
        },
        {
          name: "重庆",
          ename: "重庆",
        },
        {
          name: "河北",
          ename: "河北",
        },
        {
          name: "河南",
          ename: "河南",
        },
        {
          name: "云南",
          ename: "云南",
        },
        {
          name: "辽宁",
          ename: "辽宁",
        },
        {
          name: "黑龙江",
          oredrNum: 44,
          goodsNum: 599,
        },
        {
          name: "湖南",
          ename: "湖南",
        },
        {
          name: "安徽",
          ename: "安徽",
        },
        {
          name: "山东",
          ename: "山东",
        },
        {
          name: "新疆",
          oredrNum: 1,//订单数量
          goodsNum: 599,//货品数量
          ename: "新疆",
        },
        {
          name: "江苏",
          ename: "江苏",
        },
        {
          name: "浙江",
          value: 3,
          ename: "浙江",
        },
        {
          name: "江西",
          ename: "江西",
        },
        {
          name: "湖北",
          oredrNum: 810,
          goodsNum: 599,
        },
        {
          name: "广西",
          ename: "广西",
        },
        {
          name: "甘肃",
          ename: "甘肃",
        },
        {
          name: "山西",
          ename: "山西",
        },
        {
          name: "内蒙古",
          ename: "内蒙古",
        },
        {
          name: "陕西",
          ename: "陕西",
        },
        {
          name: "吉林",
          ename: "吉林",
        },
        {
          name: "福建",
          oredrNum: 106,
          goodsNum: 30211111,
        },
        {
          name: "贵州",
          ename: "贵州",
        },
        {
          name: "广东",
          value: 53,
          ename: "广东",
        },
        {
          name: "青海",
          ename: "青海",
        },
        {
          name: "西藏",
          ename: "西藏",
        },
        {
          name: "四川",
          oredrNum: 453,
          goodsNum: 599,
        },
        {
          name: "宁夏",
          ename: "宁夏",
        },
        {
          name: "海南",
          ename: "海南",
        },
        {
          name: "台湾",
          ename: "台湾",
        },
        {
          name: "香港",
          ename: "香港",
        },
        {
          name: "澳门",
          ename: "澳门",
        },
      ];
      const geoCoordMap = {
        广东: [113.75, 23.04,],
        黑龙江: [128.34, 47.05],
        北京: [116.40, 40.40],
        新疆: [86.61, 40.79,],
        内蒙古: [112.17, 42.81],
        青海: [97.07, 35.62],
        西藏: [89.13, 30.66],
      }
      this.convertData = (data) => {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),//将上面数组的value添加到经纬度后面
              oredrNum: data[i].oredrNum ? data[i].oredrNum : '0',
              goodsNum: data[i].goodsNum ? data[i].goodsNum : '0',
            });
          }
        }
        return res;
      };
      this.getMapChart(cityData);
    },

    //处理涟漪特效的函数
    getMapChart (data) {
      let myChart = this.$echarts.init(document.getElementById("china-map"));
      let option = {
        tooltip: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            type: "effectScatter",//图例类型
            coordinateSystem: "geo",//使用geo地图
            symbol: "image://",//图例样式
            // symbol: "image://",//图例样式
            showEffectOn: "emphasis",//涟漪特效何时触发
            symbolSize: 20,//图例大小,
            symbolOffset: [0, -10],
            rippleEffect: {//特效设置
              scale: 2.5,
              color: "rgba(207, 55, 55, 1)",
              number: 3
            },
            showEffectOn: "render",
            data: this.convertData(data),
          },
        ],
      };
      myChart.on("click", (params) => {
      });
      myChart.setOption(option);
      window.onresize = () => {
        myChart.resize();
      }
    },
  },
  mounted() {
    // 当组件挂载后，初始化图表
    console.log("mounted............当组件挂载后，初始化图表")
    this.drawCharts();
  },

}
</script>

<style lang="scss" scoped>

.managingPatientSize {
  width: 500px;
  height: 500px;
  // background-color: #111b41;
  color: #fff;
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
      position: relative;
      #china-map {
        height: 100%;
      }
    }
  }
}
</style>
